
<!DOCTYPE html>
<html>
	<head>
		<title>Калькулятор (JQuery)</title>
		<link rel="stylesheet" type="text/css" href="/static/style.css">
		<script src="/static/jquery.js"></script>
		<script type="text/javascript">
			function getXmlHttp(){
 				var xmlhttp;
 				try {
 					xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
 				} catch (e) {
 				try {
 				xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
				 } catch (E) {
 					xmlhttp = false;
 					}
 				}
 				if (!xmlhttp && typeof XMLHttpRequest!='undefined') {
 					xmlhttp = new XMLHttpRequest();
 				}
 				return xmlhttp;
			}
		</script>
	</head>

<body>
	<div class = "calculator">
		<input class = "input" disabled="" />
		<button class = "clear">C</button>

		<table width="100%">
			<tr>
				<td>
					<button class = "digit_b">1</button>
				</td>
				<td>
					<button class = "digit_b">2</button>
				</td>
				<td>
					<button class = "digit_b">3</button>
				</td>

				<td>
					<button class = "operation">+</button>
				</td>
			</tr>

			<tr>
				<td>
					<button class = "digit_b">4</button>
				</td>
				<td>
					<button class = "digit_b">5</button>
				</td>
				<td>
					<button class = "digit_b">6</button>
				</td>

				<td>
					<button class = "operation">-</button>
				</td>
			</tr>

			<tr>
				<td>
					<button class = "digit_b">7</button>
				</td>
				<td>
					<button class = "digit_b">8</button>
				</td>
				<td>
					<button class = "digit_b">9</button>
				</td>

				<td>
					<button class = "operation">*</button>
				</td>
			</tr>

			<tr>
				<td>
					<button class = "dot">.</button>
				</td>
				<td>
					<button class = "digit_b">0</button>
				</td>
				<td>
					<button class = "rivno">=</button>
				</td>

				<td>
					<button class = "operation">/</button>
				</td>
			</tr>

		</table>
	</div>
	<script>
	var a,b = null;
	var operation = null;
	$(document).ready(function(){

			$(".digit_b").click(function(){
					var value = $(".input").val();
					$(".input").val(value+$(this).text()); 
			});

			$('.clear').click(function(){
					$(".input").val("");
			});

			$(".dot").click(function(){
				var value = $(".input").val();
				if (value == '') 
					value = '0.';
				else {
					if (value.indexOf('.') == -1) {
						value = value + '.';
					}
				}
				$('.input').val(value);
			});

			$('.operation').click(function(){
				if (operation == null && $('.value').val() !== '') {
					operation = $(this).text();
					a = parseFloat($('.input').val());
					$('.input').val("");
				}
			});

			$('.rivno').click(function(){
				var result = 0;
				if ((operation !== null) && ($('.value').val() !== '')) {
					b = parseFloat($('.input').val());
			
					$.post('/calculate', {a: a, b: b, operation: operation}, function(d){
						$('.input').val(d);
						operation = null;
					});	
				}
			});
	});
	
	</script>
</body>
</html>